<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="/WEB-INF/tlds/spring.tld"%>
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld"%>
<c:set var="BasePath" value="${pageContext.request.contextPath}"></c:set>
<c:set var="Plugins" value="${pageContext.request.contextPath}/res/plugins"></c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>规格信息</title>
<link href="${Plugins}/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<link href="${Plugins}/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
<script src="${Plugins}/jquery/jquery-1.3.2.min.js"	type="text/javascript"></script>
<script src="${Plugins}/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/messages_cn.js" type="text/javascript"></script>
<script src="${BasePath}/res/js/common/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript" src="${BasePath}/res/js/ligerCommon.js"></script>
<script src="${BasePath}/res/js/common/jquery.validate.method.js" type="text/javascript"></script>
<script src="${Plugins}/datepicker/WdatePicker.js" type="text/javascript"></script>
<script src="${BasePath}/res/js/common/utils.js" type="text/javascript"></script>
<style type="text/css">
    body{ font-size:14px;}
    .l-table-edit {}
    .l-table-edit-td{ padding:4px;}
    .l-button-submit,.l-button-test{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
    .l-verify-tip{ left:230px; top:120px;}
    .p-tab .s-lab{font-size:14px;font-family:"微软雅黑",​"宋体",​Arial,​sans-serif;}
	input.l-textarea{width:170px;height:20px;font-size:14px;}
	 .navbar {
		height: 20px;
		border-bottom: #E6E6E6 solid 1px;
		line-height: 20px;
	}
	.li-spec-option{float:left;width:150px}
	.li-spec-option-del{float:left;width:50px}
</style>
</head>
<body style="padding:10px">
<div class="navbar">
		<span>您当前的位置：</span>
		商品管理 &gt;规格管理 &gt; 规格信息
</div>
<form name="form1" method="post" action="saveSpec.do" id="form1">
	<input type="hidden" id="opType" name="opType" value="${opType}" />
	<input type="hidden" id="catNo" name="catNo" value="${spec.catNo}" />
	<input type="hidden" id="specNo" name="specNo" value="${spec.specNo}" />
<br>
<table cellpadding="0" cellspacing="0" class="l-table-edit p-tab" >
    <tr>
        <td align="right" class="l-table-edit-td s-lab"><font  color="red">*</font>规格名称:</td>
        <td align="left" class="l-table-edit-td s-lab"><input id="specName" name="specName"  type="text" class="l-textarea"  value="${spec.specName}" validate="{required:true,minlength:1,maxlength:10}" /></td>
        <td align="left"></td>
    </tr>
	 <tr height="15"></tr>
</table>
<table cellpadding="0" cellspacing="0" class="l-table-edit p-tab" >	 
	 <tr>
	 <td width = "800px">
	 	<ul id="ul_options" style="list-style:none;width:800px;">
	 		<c:if test="${spec.specValOptions != null}">
	 			<c:forEach var="specValOption" items = "${spec.specValOptions}">
	 				<li id="${specValOption.optionNo}" class="li-spec-option"><a href="javascript:toEditOption('${specValOption.optionNo}')">${specValOption.optionName }</a></li>
	 				<li class="li-spec-option-del"><a href="javascript:toDelOption('${specValOption.optionNo}')">删除</a></li>
	 			</c:forEach>
	 		</c:if>
	 	</ul>
	 
	 </td>
	 </tr>
</table>

<input type="submit" value="保存" id="Button1" class="l-button l-button-submit" /> 
<input type="button" value="删除" name="delSpecBtn"  id="delSpecBtn" class="l-button l-button-test" />
<input type="button" value="新增规格值" name="addOptsBtn"  id="addOptsBtn" class="l-button l-button-test" />
<input type="button" value="取消" name="tests"  id="tests" class="l-button l-button-test" />
</form>
<div style="display:none">
<!--  数据统计代码 --></div>

<script type="text/javascript">
$(function ()
		{
			//validate
		    $.metadata.setType("attr", "validate");
		    var v = $("form").validate({
		        errorPlacement: function (lable, element)
		        {
		        	lable.ligerHideTip();
		            if (element.hasClass("l-textarea"))
		            {
		                element.ligerTip({ content: lable.html(), target: element[0] }); 
		            }
		            else if (element.hasClass("l-text-field"))
		            {
		                element.parent().ligerTip({ content: lable.html(), target: element[0] });
		            }
		            else
		            {
		                lable.appendTo(element.parents("td:first").next("td"));
		            }
		        }
		    ,
		        success: function (lable)
		        {
		            lable.ligerHideTip();
		            lable.remove();
		        },
		        submitHandler:function()
		        {
		            $("form .l-text,.l-textarea").ligerHideTip();
		            var options = {
		            		type: 'POST',
		            		dataType: 'json',
		            		beforeSend: function(){
		            			$("#form1").find(":submit,:button").attr("disabled", true);
		            		},
		            		success: function(data){
		            			if(data.res=="success") {
		            				alert('保存成功');
		           					close_liger_tab();
		            				parent.window.location.reload();
		            			} else {
		            				alert('保存失败');
		            			}
		            		}
		            	}, $form1 = $("#form1");
		           $form1.ajaxSubmit(options);
		             return false;
		        }
		    });
		}); 
// 取消
$("#tests").click(function() {
	close_liger_tab();
});	
$("#delSpecBtn").click(function() {
	toDelSpec();
});
$("#addOptsBtn").click(function() {
	toAddOption();
});
/*删除规格*/
function toDelSpec(){
	var specNo =$("#specNo").val(); 
	if(!specNo) {
		alert("这是一个尚未保存的新规格，无法进行删除操作");
		return;
	}
	$.ligerDialog.confirm('您确定要删除吗？', function (yes) { 
	  	  if(yes){
	  		$.post("deleteSpec.do?specNo=" + specNo, function(data) {
	  			if(!data || data.toLowerCase() == "fail") {
	  				alert("操作失败");
	  			} else if(data.toLowerCase() == "success") {
	  				alert("操作成功");
	  				close_liger_tab();
    				parent.window.location.reload();
	  			} else {
	  				alert(data);
	  			}
	  		});
	  	} });
}
/*显示规格选项输入窗*/
function toAddOption(){
	var specName = StringUtils.trim($("#specName").val());
	if(!specName) {
		alert("请先输入规格名称");
		return;
	}
	if($("#opType").val() == "add" && $("#specNo").val() == "") {
		$("#form1").ajaxSubmit({
			type: 'POST',
			dataType: 'json',
			success:function(data) {
				if(data.res == "success") {
					$("#specNo").val(data.specNo);
					var w = $.ligerDialog.open({ title: "新增规格值", url: 'toAddOption.do?specNo=' + $("#specNo").val(), height: 400, width: 600, isResize: false, isDrag: false });
					w.show();
				} else {
					alert('保存规格失败，无法新增规格值');
				}
			}
		});
		
	} else {
		var w = $.ligerDialog.open({ title: "新增规格值", url: 'toAddOption.do?specNo=' + $("#specNo").val(), height: 400, width: 600, isResize: false, isDrag: false });
		w.show();
	}
}
/*删除选项*/
function toDelOption(optionNo) {
	$.ligerDialog.confirm('您确定要删除吗？', function (yes) { 
  	  if(yes){
  		$.post("deleteOption.do?optionNo=" + optionNo, function(data) {
  			if(!data || data.toLowerCase() == "fail") {
  				alert("操作失败");
  			} else if(data.toLowerCase() == "success") {
  				alert("操作成功");
  				delOption(optionNo); //删除页面元素
  			} else {
  				alert(data);
  			}
  		});
  	} });
}
/*弹出规格值编辑窗 */
function toEditOption(optionNo) {
	var w = $.ligerDialog.open({ title: "编辑规格值", url: 'toEditOption.do?optionNo=' + optionNo, height: 400, width: 600, isResize: false, isDrag: false });
	w.show();	
}
/**添加新的规格选项*/
function addOption(optionNo, optionName){
	if(optionNo && StringUtils.trim(optionNo) && optionName && StringUtils.trim(optionName)) {
		var ul = $("#ul_options");
		var li = $("<li id=\""+ optionNo +"\" class=\"li-spec-option\"><a href=\"javascript:toEditOption('" + optionNo + "')\">"+optionName+"</a></li>");
		li.appendTo(ul); 
		
		li = $("<li class=\"li-spec-option-del\"><a href=\"javascript:toDelOption('" + optionNo + "')\">删除</a></li>");
		li.appendTo(ul);
		
	}
}
/**编辑规格选项*/
function editOption(optionNo, optionName) {
	var o = $("#"+optionNo);
	if(o) {
		$(o.children()[0]).text(optionName);
	}
} 
/**删除规格选项*/
function delOption(optionNo) {
	var o = $("#"+optionNo);
	if(o) {
		o.next().remove();
		o.remove();
	}
} 
</script>
</body>
</html>